<template>
  <el-scrollbar v-if="isMain" height="300px">
    <div
      @mouseover="showReadButton"
      @mouseleave="showTime"
      class="card"
      v-for="(item, index) in unReadList"
      :key="index"
    >
      <div>
        <p>{{ item.content }}</p>
      </div>
      <div
        style="display: flex; justify-content: space-between; margin-top: 15px"
      >
        <div class="content">{{ item.title }}</div>
        <div>
          <span v-if="timeVisible" ref="timeDisplay" class="time">{{
            item.createTime
          }}</span>
          <button
            ref="readButton"
            v-if="isReadButtonVisible"
            @click="markAsRead(index, item.id)"
          >
            设为已读
          </button>
        </div>
      </div>
    </div>
  </el-scrollbar>

  <!-- 空状态 -->
  <div>
    <el-empty description="空" v-if="isEmpty" :image-size="100" />
  </div>

  <el-divider class="divider_my" ::v-deep="$attrs" />
  <div style="width: 100%">
    <button class="look_all_btn" @click="$router.push('/notice')">
      查看全部
    </button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { queryUnReadNotice, updateNotice } from "@/api/notice";
import $bus from "@/bus/index.js";
const isReadButtonVisible = ref(false);
const timeVisible = ref(true);
const isEmpty = ref(false);
const isMain = ref(true);
const emit = defineEmits(["get-count"]);
//获取未读通知
const unReadList = ref([]);
onMounted(() => {
  getUnReadData();

  //第一个参数：即为事件类型；第二个参数：即为事件回调
  $bus.on("notices", (notice) => {
    isMain.value = false;
    unReadList.value = notice;
    isEmpty.value = true;
  });

  $bus.on("all", (notice) => {
    getUnReadData();
  });

  $bus.on("read", (notice) => {
    getUnReadData();
  });

  $bus.on("unread", (notice) => {
    getUnReadData();
  });
});

const getUnReadData = () => {
  queryUnReadNotice().then((res) => {
    if (res.code === 200 && res.data !== null) {
      unReadList.value = res.data.data;
      emit("get-count", res.data.count);
      isMain.value = true;
    } else {
      isEmpty.value = true;
    }
  });
};

const showTime = () => {
  timeVisible.value = true;
  isReadButtonVisible.value = false;
};

const showReadButton = () => {
  timeVisible.value = false;
  isReadButtonVisible.value = true;
};

//设为已读处理
const markAsRead = (index, id) => {
  unReadList.value.splice(index, 1);
  updateNotice(id);
};
</script>

<style scoped>
.divider_my {
  margin: 10px 0 10px 0;
}

.look_all_btn {
  width: 100%;
  height: 35px;
  color: #909399;
  font-size: 14px;
}

.look_all_btn:hover {
  background-color: #f0f2f5;
}
.card {
  width: 352px;
  border-radius: 5px;
  background-color: #fff;
  padding: 10px;
  transition: background-color 0.3s, transform 0.3s;
}

.card:hover {
  background-color: #f0f2f5;
}

p {
  color: #303133;
}

.time {
  font-size: 13px;
  color: #666;
  font-weight: 400;
}

.content {
  font-size: 13px;
  color: #666;
  font-weight: 400;
}

button {
  right: 5px;
  bottom: 5px;
  background-color: #fff;
  color: #303133;
  border: none;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #d9ecff;
}
</style>
